<!DOCTYPE html>

<html lang="en">
  <meta charset="utf-8" />
  <title>ICERender-line-basic</title>
  <body>
    <div>
      <button id="btn-1">保存</button>
      <button id="btn-2">加载</button>
      <button id="btn-3">清除所有</button>
      <script src="../../dist/index.umd.js"></script>
    </div>
    <br/>
    <canvas id="canvas-1" width="1024" height="768" style="background-color: #f7f7f7;"></canvas>
  </body>
  <script type="text/javascript">
        let ice = new ICE.ICE().init('canvas-1');

        document.querySelector('#btn-1').addEventListener('click', (evt) => {
          const jsonStr = ice.toJSONString();
          window.localStorage.setItem('json-data', jsonStr);
        });
        document.querySelector('#btn-2').addEventListener('click', (evt) => {
          const jsonStr = window.localStorage.getItem('json-data');
          ice.fromJSONString(jsonStr);
        });
        document.querySelector('#btn-3').addEventListener('click', (evt) => {
          console.log('ice.clearAll()');
          ice.clearAll();
        });

        let baseRect1 = new ICE.ICERect({
          left: 100,
          top: 100,
          width: 100,
          height: 100,
          style: {
            strokeStyle: '#0c09d4',
            fillStyle: '#f5d106',
            lineWidth: 5,
          },
          // animations: {
          //   left: { from: 0, to: 500, duration: 1000, easing: 'easeInQuad' },
          //   top: { from: 0, to: 200, duration: 3000 },
          //   width: { from: 100, to: 200, duration: 5000 },
          //   height: { from: 100, to: 200, duration: 5000 },
          // },
          transform: {
            // translate: [10, 10],
            // rotate: 30,
            skew: [10, 0],
            // scale: [1, 1],
          },
          transformable:false,
        });
        baseRect1.on('click', (evt) => {
          console.log('baseRect1');
        });
        ice.addChild(baseRect1);

        let rect1 = new ICE.ICERect({
          left: 500,
          top: 100,
          width: 100,
          height: 100,
          style: {
            strokeStyle: '#0c09d4',
            fillStyle: '#f5d106',
            lineWidth: 1,
          },
          transform: {
            rotate: 45,
            scale: [1, 1],
          },
          // animations: {
          //   left: { from: 0, to: 100, duration: 2000, easing: 'easeOutQuart' },
          //   // top: { from: 0, to: 200, duration: 3000 },
          //   width: { from: 100, to: 200, duration: 5000 },
          //   height: { from: 100, to: 200, duration: 5000 },
          // },
          transformable:false,
        });
        ice.addChild(rect1);

        let line1 = new ICE.ICEPolyLine({
          left: 0,
          top: 0,
          points: [[500, 500],[600, 600]],
          style: {
            strokeStyle: '#08ee00',
            fillStyle: '#008000',
            lineWidth: 2,
          },
          arrow:'end',//none,start,end,both
        });
        ice.addChild(line1);
  </script>
</html>
